<template>
  <div>
    <el-form label-width="110px" size="medium" style="margin-top: 20px">
      <el-form-item
        v-for="(item, i) in houseRecommend"
        :label="item.title"
        :key="i"
        :rules="[{ required: item.required }]"
      >
        <el-button size="mini" type="primary" style="margin-bottom: 10px" @click="handleShowPopVisible(item.title)"
          >参考模板</el-button
        >
        <el-input
          type="textarea"
          :placeholder="'请输入' + item.title"
          v-model="houDelRecommendVO[item.key]"
          show-word-limit
          :minlength="item.minlength"
          :maxlength="item.maxlength"
          :rows="item.rows"
          :class="{ 'reject-input': !!houDelRecommendErrorMsg[item.key] }"
          @blur="handleRecommendBlur(item.key, $event, item)"
        ></el-input>
        <div class="d-flex ai-center">
          <div :class="['fs-sm', 'flex-1', houDelRecommendErrorMsg[item.key] ? 'text-red' : 'text-gray']">
            {{ houDelRecommendErrorMsg[item.key] || item.tipsFormat() }}
          </div>
          <el-button size="mini" type="primary" @click="handleSaveModel(item.key)">存储模板</el-button>
        </div>
      </el-form-item>
    </el-form>
    <!-- 配置网络房源介绍的模板 -->
    <com-set-house-model
      :title="houseModelTitle"
      :houDelVO="houDelVO"
      :modelPopVisible.sync="setHouseModelPopVisible"
      @onsetmodel="handleSetModel"
    ></com-set-house-model>
  </div>
</template>
<script>
import { houseRecommend } from "@/config/house/houseDetailConfig";
import { savePersonalDefaultInfo } from "@/api/user";
import comSetHouseModel from "../dialog/com-set-house-model";

export default {
  name: "ComRecommend",
  components: {
    comSetHouseModel,
  },
  props: {
    houDelRecommendVO: Object,
    houDelRecommendErrorMsg: Object,
    houDelVO: Object,
    // 是否需要错误监听
    errorWatch: { 
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      houseRecommend: Object.freeze(houseRecommend),
      houseModelTitle: "", //设置模板题目
      setHouseModelPopVisible: false, //设置房源介绍模板
    };
  },
  created() {},
  mounted() {},
  watch: {
    houDelRecommendVO: {
      deep: true,
      handler(newVal) {
        if (!this.errorWatch) return
        const { houDelRecommendErrorMsg } = this;
        houseRecommend.forEach((item) => {
          let value = newVal[item.key];
          if (!item.required) return;

          let errorMsg = item.rule(value);
          houDelRecommendErrorMsg[item.key] = errorMsg;
        });
      },
    },
  },
  computed: {},
  methods: {
    // 打开模板
    handleShowPopVisible(v) {
      this.houseModelTitle = v;
      this.setHouseModelPopVisible = true;
    },
    handleRecommendBlur(key, e, item) {
      this.houDelRecommendVO[key] = (this.houDelRecommendVO[key] || "").replace(/ /g, "");
    },

    handleSaveModel(key) {
      let item = houseRecommend.find((v) => v.key == key);
      let value = this.houDelRecommendVO[key];

      let errorMsg = item.rule(value);
      if (errorMsg) return this.$message.error(errorMsg);

      savePersonalDefaultInfo({
        tag: item.title,
        material: value,
      }).then(({ isSuccess, errorMessage = "添加失败！" }) => {
        if (isSuccess) {
          this.$message.success("添加成功！");
        } else {
          this.$message.error(errorMessage);
        }
      });
    },
    handleSetModel(v) {
      let item = houseRecommend.find((v) => v.title == this.houseModelTitle);
      this.houDelRecommendVO[item.key] = v;
    },
  },
};
</script>
<style></style>
